import { useState, useRef } from "react";

// 函数组件：注意大驼峰命名规则
function TodoList() {

    const [list, setList] = useState([]);
    const inputRef = useRef();
    let id = 1;

    function handleSubmit() {
        const value = inputRef.current.value
        if (value) {
            list.push(value)
            // 跟新状态渲染组件
            setList([...list])
            
        }

    }
    function deleteinput(i) {
        list.splice(i, 1)
        setList([...list])
        inputRef.current.value = ""
    }


    return (
        <div>
            <h1>todo-list</h1>
            <div>
                <input type="text" ref={inputRef} />
                <button onClick={handleSubmit}>提交</button>
            </div>
            {list.map((v, i) => <ListItem key={id++} i={i} deleteinput={deleteinput} v={v} />)}
        </div>
    )
}

function ListItem(props) {
    return (
        <li>
            <span>{props.v}</span>
            <button onClick={() => props.deleteinput(props.i)}>删除</button>
        </li>
    )
}

// 记得export default
export default TodoList;